@import "../variables";

.global_loading {
  height: 100vh;
  width: auto;
  background-color: #000000cf;

  .loading {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    background-image: url("../../img/messenger.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20%;
    -webkit-animation-name: rotation;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-name: rotation;
    -moz-animation-duration: 4s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;
    -o-animation-name: rotation;
    -o-animation-duration: 4s;
    -o-animation-iteration-count: infinite;
    -o-animation-timing-function: linear;
    animation-name: rotation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
}

.modal {
  &__children {
    &-verification {
      display: flex;
      flex-direction: column;

      .button-refresh {
        display: flex;
        align-self: center;
        text-transform: unset;
      }
    }
  }
}

.messenger {
  $self: &;
  display: flex;
  width: auto;

  &__sidebar {
    display: flex;
    width: 425px;
    box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 4%);

    &-dialogs {
      height:calc(100vh - 136px);
      overflow-y: initial;
      overflow-x: hidden;

      &::-webkit-scrollbar
      {
        width: 0;
      }

      .dialogs {
        height: 100%;
      }
    }

    &-dialogs:hover {
      &::-webkit-scrollbar
      {
        width: $widthScrollBar;
      }
    }

    &-profile {
      display: flex;
      justify-content: center;
      padding: 10px;

      &-progressInfo {
        width: 150px;
        height: 200px;
        display: flex;
        align-items: center;
        font-weight: 200;
        font-size: 13px;
        text-align: center;
        line-height: 1.5;
        user-select: none;
      }

      &-progress {
        position: absolute;
        width: 200px;
        height: 200px;

        .rc-progress-circle-trail {
          stroke: $lightGray !important;
        }

        .rc-progress-circle-path {
          stroke: $green !important;
        }
      }
    }

    &-profileControl {
      padding: 10px;

      &-top {
        display: flex;
        align-items: center;

        &-toggleInfo {
          padding: 12px 0;
          font-size: 14px;
          font-weight: 300;
          opacity: 0.7;
        }
      }

      &-main {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        button {
          margin: 5px;
          font-size: 13px;
          font-weight: 400;
          text-transform: none;
          max-width: 140px;
        }
      }

      &-changeProfile {
        background-color: $green !important;
        text-transform: unset !important;
        font-weight: 400 !important;
      }

      &-changeProfile::before {
        content: '';
        width: 25px;
        height: 25px;
        padding: 0 5px 0 5px;
        background-image: url("../../img/edit.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
      }

      &-deleteProfile {
        background-color: $red !important;
        text-transform: unset !important;
        font-weight: 400 !important;
      }

      &-deleteProfile::before {
        content: '';
        width: 25px;
        height: 25px;
        padding: 0 5px 0 5px;
        background-image: url("../../img/trash.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 70%;
      }
    }

    &-contacts {
      padding-top: 20px;
      width: 312px;
      height: 66vh;
      overflow-y: initial;
      overflow-x: hidden;
    }

    &-contacts::-webkit-scrollbar-track{
      margin-top: 55px;
    }

    &-item {
      padding: 15px 0 0 15px;
      width: 324px;
      box-shadow: 0 0 5px 0 rgb(0 0 0 / 4%);

      &-header {
        display: flex;
        justify-content: center;
        padding: 20px;

        &-top {
          font-size: 16px;
          opacity: 0.7;
          width: 100%;
          display: flex;
          justify-content: space-evenly;
          font-weight: 300;

          .add__newDialog {
            cursor: pointer;
            height: 20px;
            width: 20px;
            border: unset;
            background-position: center;
            background-repeat: no-repeat;
            background-size: 80%;
            background-color: $darkGray;
            border-radius: 50%;
          }

          .add__newDialog:hover {
            scale: (1.4);
          }
        }
      }
    }
  }

  &__imProfile {
    flex: 1;
    background-color: $lightBlue;

    &--container {
      margin: 40px 0 0 -20%;
    }
  }

  &__contact {
    &-profile {
      flex: 1;
      background-color: $lightBlue;
    }
  }
}

@-webkit-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);}
}
@-moz-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);}
}
@-o-keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);}
}
@keyframes rotation {
  0% {-webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg);
    -moz-transform:rotate(720deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);}
}